<template>
	<div id="quanxianguanli">
		<el-button type="success" class="but"
			@click="show=true,parentid=0,parentDesc=''">新增权限</el-button>
		<el-collapse v-model="activeName" accordion
			v-for="(item,key,index) in allPermission" :key="key"
			:class="collapse">
	  		<el-collapse-item :title="item.permissionDesc" :name="index">
	  			 <template slot="title">
	  			 	<div id="delectquanxian">
	  			 		{{item.permissionDesc}}
			      		<el-button type="danger" size="mini" style="height: 40px;margin-top: 4px;"
			      		@click.stop="delectper(item._id)">删除</el-button>
	  			 	</div>
			    </template>
	  			<ul style="text-align: left;padding-left: 20px;">
	  				<li>
	  					<el-button type="primary" size="mini"
	  						style="height: 40px;width: 70px;"
	  						@click="show=true,parentid=item._id,parentDesc=item.permissionDesc">
	  					新增权限
	  					</el-button>
	  				</li>
	  				<li v-for="(item1,key1) in item.children" :key="key1"
	  					style="display: flex;justify-content: space-between;padding-bottom: 0;">
	  					{{item1.permissionDesc}}
	  					<el-button type="danger" style="width: 60px;height: 40px;margin-right: 20px;"
	  						@click='fn(item1._id)'>删除</el-button>
	  				</li>
	  			</ul>
	  		</el-collapse-item>
		</el-collapse>
		<addpermission :show="show"
		:parentid="parentid"
		:parentDesc="parentDesc"
		></addpermission>
		<!--{{allPermission}}-->
	</div>
</template>

<script>
	import addpermission from './addPermission'
	export default{
		components:{addpermission},
		mounted(){
			this.$store.dispatch("loadallpermissions")
		},
		computed:{
			allPermission(){
				return this.$store.getters.allPermission
			}
		},
		 data() {
     		 return {
       		 activeName: '1',
       		 show:false,
       		 parentid:0,
       		 parentDesc:''
      			};
   		},
   		methods:{
   			delectper(id){
   				var action=()=>{
   					this.$http.post(this.$api.deletePermission,{_id:id})
   					.then((res)=>{
   						this.$message({
   							message:res.data.message,
   							type:res.data.success?"success":"danger"
   						});
   						if(res.data.success){
   							this.$store.dispatch("loadallpermissions")
   						}
   					})
   				}
   				this.operatorConfirm(action,"删除权限");
   			},
   			fn(id){
   				var action=()=>{
   					this.$http.post(this.$api.deletePermission,{_id:id})
   					.then((res)=>{
   						this.$message({
   							message:res.data.message,
   							type:res.data.success?"success":"danger"
   						});
   						if(res.data.success){
   							this.$store.dispatch("loadallpermissions")
   						}
   					})
   				}
   				this.operatorConfirm(action,"删除权限");
   			}
		}
   	}
</script>

<style lang="scss" >
	#quanxianguanli{
		width: 100%;
		height: 100%;
		.el-collapse-item__header{
			text-align: left;
			padding-left: 20px;
		}
		.but{
			margin-left: -1260px;
			margin-bottom: 10px;
		}
		#delectquanxian{
			display: flex;
			justify-content: space-between;
		}
	}
</style>